<template>
    <div class="common-layout">
    <el-container class="container">
      <el-aside style="width: 200px;margin-top: 20px">
        <!-- <switch></switch> -->
        <SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
      </el-aside>
      <el-main >
        <books class="books-area" ref="booksArea"></books>
        <!-- <ElementUi></ElementUi> -->
      </el-main>
      <hr>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
</div>
  </template>
  <script>
import SideMenu from '../qiantai/SideMenu.vue'
  import Books from '../qiantai/Books.vue'
  export default {
    name: 'BookPage',
    data() {
        return {
        
    }
    },
  methods: {
    listByCategory() {
      var cid = this.$refs.sideMenu.cid
      var data = new FormData()
      data.append('cid',cid)
      this.$axios.post('/category', data).then(resp => {
        if (resp.status == 200) {
         this.$refs.booksArea.books = resp.data
       }
        
         
           
          
        })
      }
    },
   components:{SideMenu,Books}
  }
  </script>
  <style scoped>
  .common-layout {
  /* position: absolute; */
  /* margin-top: 7.0%; */
  width: 100%;
  display: block;
  /* margin-left: 70px; */
  background-image: url('../../assets/eva.jpg');
height: 100vh;
  background-size: cover;
  position: relative;
}

    .books-area {
      width: 990px;
      margin-left: auto;
      margin-right: auto;
    }
   .el-main{
    margin-left: 10%;
    
   }
   .el-container.is-vertical {
    flex-direction: column;
    height: 89%;
}
    
  </style>